<template>
    <div>
      <slidebar></slidebar>
      <div class='layui-body'>
        <div class='title'>晒晒活动-新建活动</div>
          <div class="layui-content">
          <form class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-form-item">        
              <label class="layui-form-label"><i>*</i>活动名称:</label>
              <div  class="layui-input-inline form_title">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入活动名称,20字以内" autocomplete="off" class="layui-input" v-model='name'>
              </div>
            </div>
            <div class="layui-form-item">        
              <label class="layui-form-label"><i>*</i>活动时间:</label>
              <div  class="layui-input-inline">
                <input type="date" name="start_at" required  lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input" v-model="activity_start">
              </div>
              <label class="layui-form-label" style="width:40px;text-align: center;">-</label>
              <div  class="layui-input-inline">
                <input type="date" name="end_at" required  lay-verify="required" placeholder="结束时间" autocomplete="off" class="layui-input" v-model="activity_end">
              </div>
            </div>
            <div class="layui-form-item">        
                <label class="layui-form-label"><i>*</i>设置奖品:</label>
                <div  class="layui-input-block">
                  <input type="text" name="price_ids" class="hide">
                  <table class="layui-table" style="width:460px">
                      <colgroup>
                        <col width="300">
                        <col width="60">
                        <col>
                      </colgroup>
                      <thead>
                        <tr>
                          <th>奖励名称</th>
                          <th>数量</th>
                          <th>操作</th>
                        </tr> 
                      </thead>
                      <tbody>
                        <tr v-for='(item,index) in awards'>
                          <td>
                            <div class="td_div"><img :src="item.image" alt="" style="width:40px;height:40px;margin:5px;"></div>
                            <div class="td_div td_div_2">{{item.title}}</div>
                            <div class="td_div td_div_2">￥{{item.price}}</div>
                          </td>
                          <td>x{{item.count}}</td>
                          <td><a href="javascript:;"  @click="deleteAward(index)">删除</a></td>
                        </tr>
                      </tbody>
                  </table>
                  <button class="layui-btn block" @click="addAward">添加奖励</button>
                </div>
              </div>
            <div class="layui-form-item">        
              <label class="layui-form-label"><i>*</i>活动主图:</label>
              <div class="layui-img">
                <ul>
                    <li v-for="(item,index) in images" :key="index">
                        <a href="javascript:void(0);">
                            <img :src="item" alt="商品图" width="60" height="60">
                        </a>
                        <a class="delete-img small" data-id="" title="删除" @click="deleteImage(index)">×</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="js-add-img add-img">
                            <input type="file" id="upfile" name="upfile" accept="image/*" @change="upFile()">
                            <span>添加图片</span>
                        </a>
                    </li>
                </ul>
              </div>
              <div class='img_tips'>推荐尺寸：750*350px，大小不超过3M</div>
            </div>
            <div class="layui-form-item layui-form-text">        
              <label class="layui-form-label"><i>*</i>奖品介绍:</label>
              <div class="layui-input-block" style="width:800px">
                <textarea id="demo" name="prize_desc" style="display: none;"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><i>*</i>赞助商：</label>
              <div class="layui-input-block" style="width:350px;">
                  <select name="sponsor_id" lay-verify="required">
                      <option value="">请选择</option>
                      <option v-for='(item,index) in sponsors' :value="index">{{item}}</option>
                  </select>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo" @click.prevent="preservation()">保存</button>
              <button type="reset" class="layui-btn layui-btn-primary">取消</button>
              </div>
          </div>
          </form> 
        </div>
        <div style="padding: 20px 30px;border-top: 1px solid #F0F0F0;">
            <router-link to="addgift" style="color: #fff;"><button class="layui-btn">添加奖励</button></router-link>
            <table class="layui-table" >
              <thead>
                <tr>
                  <th>名称</th>
                  <th>创建时间</th>
                  <th>库存</th>
                  <th>赞助商</th>
                  <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in giftList">
                    <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.created_at}}</td>
                  <td>{{item.stock}}</td>
                  <td>{{item.sponsor_id}}</td>
                  <td class="caozuo">
                    <router-link :to="{name:'addgift',params:{id:item.id}}"><a class="edit" href="javascript:;">编辑 -</a></router-link>
                          <a class="del" v-on:click="del(index,giftList)">删除</a>
                  </td>
                </tr>
             </tbody>
          </table>
          <div id="demo1"></div>
        </div> 
      </div>
    </div>
</template>
<script>
  import slidebar from '../components/slidebar'
  export default {
    name: 'add_activity',
    data () {
      return {
        name:'',
        activity_start:'',
        activity_end:'',
        awards:[], //选中商品列表
        giftList:[],  //奖品列表
        images:[], //活动图片
        introduce:'',
        sponsors:[],
        params:{A:12},
        is_show:false //商品列表弹窗是否显示
      }
    },
    components:{
        slidebar:slidebar
    },
    beforeMount:function(){
      this.sponsors=['网易严选','腾讯','阿里巴巴'];
    },
    mounted:function(){
      var that=this;
      layui.use('layedit', function(){
          var layedit = layui.layedit;
          layedit.build('demo'); //建立编辑器
        });
        layui.use('form', function(){
        var form = layui.form;
        //从文档上复制的好像没有这句
        form.render();
          
        //监听提交
        form.on('submit(formDemo)', function(data){
          console.log(data);
          that.params.title=data.field.title;
          that.params.start_at=data.field.start_at;
          that.params.end_at=data.field.end_at;
          that.params.sponsor_id=data.field.sponsor_id;
          that.params.price_desc=data.field.price_desc;
          console.log(that.params);
          layer.msg(JSON.stringify(data.field));
          return false;
        });
      });
    },
    methods:{
      addAward:function(){
        var that = this
          that.$axios.get('/apis/web/v1/admin/prizes',{params:{}}).then((res)=>{
          console.log(res)
          if(res.data.errCode == 0){
            if(res.data.data.data){
              that.giftList = []
              for(var i=0;i<res.data.data.data.length;i++){
                that.giftList.push(res.data.data.data[i])
              }
            }
            layui.laypage.render({
                elem: 'demo1'
                ,count: res.data.data.to //数据总数
                ,jump: function(obj){
                    console.log(obj)
                    that.$axios.get('/apis/web/v1/admin/prizes',{params:{page:obj.curr}}).then((res)=>{
                  console.log(res)
                  that.giftList = []
                  if(res.data.data.data){
                    for(var i=0;i<res.data.data.data.length;i++){
                      that.giftList.push(res.data.data.data[i])
                    }
                  }
                })
                }
            });
          }
        })
      },
      deleteAward:function(index){
        console.log(index);
      },
      deleteImage:function(index){
        this.images.splice(index,1);
      },
      upFile(){
        var that = this
        var reads= new FileReader();
        var f=document.getElementById('upfile').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            that.images.push(this.result)
        };
      },
      preservation(){
        // var that=this;
        // console.log(this.params);
        // this.$axios.post('/admin/activity/save',that.params).then(res => {
        //     console.log(res)
        // })
      }
    }
  }
</script>
<style scoped>
  form i{color:red;}
  .layui-body{ top:60px;font-size: 16px; }
  .title{
    display: block;
    padding: 15px;
    font-weight: 400;
    line-height: 20px;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
  }
  .layui-content{
    padding-left: 100px;
    padding-top: 40px
  }
  .form_title{width:460px;}
  .layui-img{
      margin-left: 110px;
  }
  .layui-img ul{
      overflow: hidden;
      padding: 5px 0;
  }
  .layui-img li{
      float: left;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border: 1px solid #e6e6e6;
      cursor: pointer;
      margin-right: 20px;
      position: relative;
  }
  .layui-img .add-img{
      color: #009688;
      font-size: 14px;
      position: relative;
  }
  #upfile{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      filter: alpha(opacity=0)
  }
  .layui-img .delete-img{
      position: absolute;
      top: -6px;
      right: -6px;
      z-index: 100;
      width: 18px;
      height: 18px;
      line-height: 18px;
      font-size: 20px;
      border-radius: 50%;
      background-color: rgba(153,153,153,0.6);
  }
  .img_tips{
    font-size: 12px;
    color:#999;
    margin-left:110px;
    }
  .checkbox{
    margin-left: 110px;
    min-height: 36px;
    display: inline;
    position: relative;
    border:1px solid #e6e6e6;
    top:0px;
  }
  .hide{ display: none;}
  .block{ display:block;}
  .td_div{
    float: left;
  }
  .td_div_2{
    width:200px;
    text-align: left;
    min-height: 25px;
    line-height: 25px;
  }
  .form_select{
    float: left;
    display:inline-block;
    width:250px;
    height:38px;
    border-color:#d2d2d2; 
  }
  .tanchuang{
    width:800px;
    height:600px;
    position: fixed;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 999;
    padding: 20px;
  }
</style>